<template>
  <div class="edit-profile">
    <div class="arrow-with-text-container" >
      <div  @click="fanhui">
        <i class="el-icon-arrow-left back-icon"></i>
        <span class="back-text back-icon">返回</span>
      </div>

    </div>
    <h1>编辑个人信息</h1>
    <div class="form-group">
      <label for="username">用户名</label>
      <input type="text" id="username" v-model="user.username">
    </div>
    <div class="form-group">
      <label for="email">邮箱</label>
      <input type="email" id="email" v-model="user.email">
    </div>
    <div class="form-group">
      <label for="phone">手机号</label>
      <input type="tel" id="phone" v-model="user.phone">
    </div>
    <div class="form-group">
      <label for="birthday">生日</label>
      <input type="date" id="birthday" v-model="user.birthday">
    </div>
    <div class="form-group">
      <label for="city">所在城市</label>
      <input type="text" id="city" v-model="user.city">
    </div>
    <button @click="saveProfile">保存</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        username: '玛丽亚',
        email: 'zimodesigner@163.com',
        phone: '15919698696',
        birthday: '1993-01-22',
        city: '厦门'
      }
    };
  },
  methods: {
    saveProfile() {
      // 这里可以添加保存逻辑，例如调用 API

    },
    fanhui(){
      this.$router.push("/Wo")
      this.$router.go(0)
    }
  }
};
</script>

<style>
.edit-profile {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

button {
  padding: 10px 20px;
  background-color: #ffffff;
  color: #000000;
  border: none;
  cursor: pointer;
}.arrow-with-text-container {
   display: flex;
   align-items: center;
   /* 让元素左对齐 */
   justify-content: flex-start;
 }


</style>